<script setup lang="ts">
import type { FieldValues } from "plus-pro-components";
import { reactive, ref } from "vue";
import { message } from "@/utils/message";
import { getFormColumns } from "./utils/hooks";
import $request from "./utils/request";

// 状态参数
const state = reactive({
  // 当前编辑的ID
  id: 0,
  // 表单配置
  formColumns: [],
  // 是否显示
  visible: false
});

// 详情数据
const detailData = ref<FieldValues>();

// 弹窗开启
const handleOpen = async (options: FormModalOptions) => {
  if (typeof options.id === "number" && options.id) {
    state.id = options.id;
    detailData.value = await $request.get.detail(options.id);
    state.formColumns = getFormColumns(options);
    state.visible = true;
  } else {
    message("数据读取失败，请刷新页面后重试", { type: "error" });
  }
};

defineExpose({
  handleOpen
});
</script>

<template>
  <plus-dialog
    v-model="state.visible"
    width="600px"
    title="数据详情"
    top="26vh"
    closeOnClickModal
    :has-footer="false"
  >
    <plus-descriptions
      :column="2"
      :columns="state.formColumns"
      :data="detailData"
    />
  </plus-dialog>
</template>

<style lang="scss" scoped>
//
</style>
